<template>
  <div class="balanceWater_box">
    <my-header :title="$t('lang.notices')"   :showBack='true'></my-header>
    <div>
          <van-list v-show="messageList.length>0" v-model="loading" :finished="finished" @load="loadMore" :offset="20">
            <ul class="news_list">
              <li v-for="(item,index) in messageList"  :key="index" class="news_li" @click="showxieyi(item)" :data-id='item.autoid'>
                <div class="news_top">
                  <p class="news_title">{{item.noticeTitle}}</p>
                  <div class="contertxt">
                    <div v-html="item.noticeContent" class="contertxtbox">

                    </div>
                    <p class="index_time">{{item.createTime}}</p>
                  </div>
                </div>
              </li>
            </ul>
          </van-list>
          <div v-if="messageList.length==0" class="no_data">
              <img src="../../assets/img/my/nodata.png" alt="" srcset="">
              <span>暂无数据</span>
          </div>
    </div>
        <van-popup class="xy_popup" v-model="qrPopup"  position="right" :overlay="false">
            <my-header :showBack="true"  :title="$t('lang.notices')"></my-header>
            <div class="setbi_box">
              <div class="info_bibox" v-for="item in propData">
                <h3>{{item.noticeTitle}}</h3>
                <p class="info_time">{{item.createTime}}</p>
                <div class="info_cont" v-html="item.noticeContent">
                </div>
              </div>  
            </div>
          </van-popup>
  </div>
</template>

<script>
import header from "@/components/header";
import timeFormat from "../../store/timeFormat";

export default {
  components: {
    "my-header": header
  },
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return timeFormat.formatDate(date, "yyyy.MM.dd hh:mm");
    }
  },
  data(){
    return{
      messageList:[],
      loading:false,
      finished:true,
      searchData:{
        pageNo:1,
        pageSize:20,
        type:1
      },
      qrPopup:false,

      propData:[{
        noticeTitle:"",createTime:"",noticeContent:"",
      }],
    }
  },
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return timeFormat.formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
  },
  watch:{
    '$route'(val,oldval){
      if(oldval.fullPath.indexOf('?')!=-1){
        this.qrPopup = false;
        this.bilistProp = false;
      }
      if(val.fullPath.indexOf('?qrPopup')!=-1){
        this.qrPopup = true;
      }
      if(val.fullPath.indexOf('?bilistProp')!=-1){
        this.bilistProp = true;
      }
    },
    inputName(val){
      console.log(val);
      this.inputName=val;
      this.gettzfhsylist();
    }
  },
  mounted(){
    this.getMessage();
  },
  methods:{
    getMessage(){
      this.searchData.pageNo = 1;
      this.$ajax(this.$api.selectNotice, this.searchData).then(res => {
        if (res.code == 0) {
          if (res.msg && res.msg.list.length > 0) {
              this.loading = false;
              this.messageList = res.msg.list;
              this.finished = this.searchData.pageNo == res.msg.pageNum;
          } else {
            this.messageList = [];
          }
        }
      });
    },
    loadMore(){
      this.searchData.pageNo += 1;
      this.$ajax(this.$api.selectCustomerMessageList, this.searchData).then(res => {
        if (res.code == 0) {
          if (res.msg && res.msg.list.length>0) {
            this.loading = false;
            this.messageList = this.messageList.concat(res.data.list);
            this.finished = this.searchData.pageNo == res.msg.pageCount;
          }
        }
      });
    },
    showxieyi(item){
      if(window.location.href.indexOf('?qrPopup')==-1){
        window.location.href = window.location.href+'?qrPopup';
      }
      this.qrPopup = true;
      console.log(item)
      this.propData=[{
        noticeTitle:item.noticeTitle,createTime:item.createTime,noticeContent:item.noticeContent,
      }]
    },
  }
}
</script>

<style lang='less' scoped>
.balanceWater_box {
  background: #f5f5f5;color: #333333;
}
.news_list li:last-child{ border-bottom: 1px solid #eeeeee;}
.news_li{
  border-top: 1px solid #eeeeee;padding: 0 12px 10px 12px;background:#ffffff;margin-bottom: 8px;
}
.info_bot{
  display: flex;justify-content:space-between;margin-top:10px;
  p{width: 50%;}
  }
.news_xq{text-align: right;}  
.xy_popup{
  width: 100%;
  height: 100%;
  .xy_box{
    padding: 20px 12px;
    box-sizing: border-box;
    border-radius: 0px;
  }
  .xy_boxbg{
    padding: 20px 20px 40px 20px;
    background: #ffffff;
  }
}
.info_bibox{
  box-sizing: border-box;padding:10px 12px;
  h3{text-align: center;color: #666666;}
  .info_time{text-align: right;padding: 5px 0;}
}
// 文章内容
.news_title{padding: 5px 0;font-size: 14px;border-bottom: 1px solid #eeeeee;}
.contertxtbox{
  height:34px;
  overflow: hidden;
  padding-top: 5px;
  p{line-height: 26px;font-size: 14px!important;}
}
.index_time{padding: 5px 0;text-align: right;}
</style>
